<!-- 备注 --> 
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    @close="handleClose"
  >
    <el-form ref="form" :model="formData" label-width="80px">
      <!-- 备注输入框 -->
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="formData.remarks"
          type="textarea"
          :rows="4"
          placeholder="请输入备注内容"
          maxlength="500"
        />
      </el-form-item>

      <!-- 备注历史 -->
      <el-form-item label="备注历史">
        <el-table :data="remarkHistory" border style="width: 100%" size="small">
          <el-table-column label="时间" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="备注人" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.createBy }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{ scope.row.remarks }}
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addRemarks } from "@/api/training/remarks";
export default {
  name: "RemarkDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    recordId: {
      type: String,
      required: true,
    },
    remarkHistory: {
      type: Array,
      default: () => [],
    },
    remarkType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        remarks: "",
      },
      title: "备注",
    };
  },
  methods: {
    // 关闭对话框时重置数据
    handleClose() {
      this.$emit("update:visible", false);
      this.resetForm();
    },

    // 取消操作
    cancel() {
      this.$emit("update:visible", false);
      this.resetForm();
    },

    // 提交备注
    submit() {
      if (!this.formData.remarks.trim()) {
        this.$message.warning("请输入备注内容");
        return;
      }

      const params = {
        foreignId: this.recordId,
        remarks: this.formData.remarks,
        remarkType: this.remarkType,
      };

      console.log(params);
      addRemarks(params)
        .then(() => {
          this.$message.success("备注提交成功");
          this.$emit("success", this.formData.remarks); // 触发成功事件
          this.cancel();
        })
        .catch((err) => {
          this.$message.error("提交失败：" + err.message);
        });
    },

    // 重置表单
    resetForm() {
      this.formData.remarks = "";
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  padding-top: 20px;
}
</style>


